<template>
  <uni-popup ref="popup" type="bottom">
    <view class="login-modal">
      <view class="modal-header">
        <text class="title">登录</text>
        <uni-icons 
          type="close" 
          size="24" 
          color="#999" 
          @click="close"
        ></uni-icons>
      </view>
      
      <view class="form-group">
        <input 
          v-model="form.username" 
          placeholder="请输入用户名" 
          class="input"
        />
      </view>
      
      <view class="form-group">
        <input 
          v-model="form.password" 
          placeholder="请输入密码" 
          password 
          class="input"
        />
      </view>
      
      <button 
        class="login-btn" 
        :disabled="loading" 
        @click="handleLogin"
      >
        <text v-if="!loading">登录</text>
        <uni-load-more v-else status="loading" color="#999"></uni-load-more>
      </button>
      
      <view class="footer">
        <text class="footer-text">还没有账号？</text>
        <text class="register-link" @click="goToRegister">立即注册</text>
      </view>
    </view>
  </uni-popup>
</template>

<script>
export default {
  props: {
    show: Boolean
  },
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      loading: false
    }
  },
  watch: {
    show(newVal) {
      if (newVal) {
        this.$refs.popup.open()
      } else {
        this.$refs.popup.close()
      }
    }
  },
  methods: {
    close() {
      this.$emit('close')
    },
    goToRegister() {
      this.$emit('go-register')
      this.close()
    },
    async handleLogin() {
      if (!this.form.username || !this.form.password) {
        uni.showToast({
          title: '请输入用户名和密码',
          icon: 'none'
        })
        return
      }
      
      this.loading = true
      
      try {
        const res = await new Promise((resolve, reject) => {
          uni.request({
            url: 'http://localhost:3000/api/user/login',
            method: 'POST',
            data: this.form,
            success: resolve,
            fail: reject
          })
        })
        
        if (res.data.code === 200) {
          uni.showToast({
            title: '登录成功'
          })
          
          // 存储token和用户信息
          uni.setStorageSync('token', res.data.data.token)
          uni.setStorageSync('userInfo', JSON.stringify(res.data.data.userInfo))
          
          this.$emit('login-success', res.data.data.userInfo)
          this.close()
        } else {
          uni.showToast({
            title: res.data.message || '登录失败',
            icon: 'none'
          })
        }
      } catch (err) {
        console.error('登录失败:', err)
        uni.showToast({
          title: '登录失败，请重试',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped>
.login-modal {
  background-color: #fff;
  border-radius: 24rpx 24rpx 0 0;
  padding: 40rpx;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.form-group {
  margin-bottom: 30rpx;
}

.input {
  height: 80rpx;
  border: 1px solid #eee;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
}

.login-btn {
  height: 80rpx;
  background-color: #7bbcb2;
  color: #fff;
  border-radius: 8rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
  margin-top: 40rpx;
}

.login-btn[disabled] {
  background-color: #ccc;
}

.footer {
  display: flex;
  justify-content: center;
  margin-top: 40rpx;
}

.footer-text {
  font-size: 28rpx;
  color: #999;
}

.register-link {
  font-size: 28rpx;
  color: #7bbcb2;
  margin-left: 10rpx;
}
</style>